CSS Grid - Guide

1. Grille Responsive

.grid-container {
    display: grid;
    
    /* Colonnes responsive */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* ou */
    grid-template-columns: 1fr 2fr 1fr;
    
    /* Rangées automatiques */
    grid-auto-rows: minmax(100px, auto);
    
    /* Espacement */
    gap: 20px;
    
    /* Responsive avec media queries */
    @media (max-width: 768px) {
        grid-template-columns: 1fr;
    }
}

/* Exemple de grille responsive adaptative */
.adaptive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

/* Grille avec zones de tailles différentes */
.mixed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, auto);
    gap: 1rem;
}

.featured {
    grid-column: span 2;
    grid-row: span 2;
}

Points clés :

minmax() définit les tailles minimales et maximales
1fr représente une fraction de l'espace disponible
gap crée l'espacement entre les éléments
auto-fit/auto-fill permettent l'adaptation automatique

2. Grid Areas

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    gap: 20px;
}

/* Attribution des zones */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

/* Responsive Layout */
@media (max-width: 768px) {
    .grid-container {
        grid-template-areas: 
            "header"
            "main"
            "sidebar"
            "footer";
        grid-template-columns: 1fr;
    }
}

/* Layout complexe */
.complex-grid {
    display: grid;
    grid-template-areas: 
        "nav    nav    nav"
        "side   main   main"
        "side   main   main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: 60px 1fr 1fr 60px;
}

Avantages des Grid Areas :

Layout visuel et intuitif
Facilite la réorganisation responsive
Nommage explicite des zones
Meilleure maintenabilité

3. Auto-fit vs Auto-fill

/* Auto-fit : s'adapte à la largeur */
.auto-fit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* Auto-fill : remplit avec des colonnes vides */
.auto-fill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

/* Combinaison avec des tailles minimales */
.responsive-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1rem;
}

/* Grille dense */
.dense-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-flow: dense;
    gap: 1rem;
}

Différences clés :

auto-fit : rétracte les colonnes vides
auto-fill : maintient les colonnes vides
Utilisez auto-fit pour un design responsive
Utilisez auto-fill pour maintenir une structure de grille